<script setup>
import {ref} from 'vue';
import {message} from 'ant-design-vue';
import {MobileOutlined, SafetyOutlined, UserOutlined, LockOutlined} from '@ant-design/icons-vue';
import axios from "axios";
import {useRouter} from "vue-router";

const phone = ref('');
const verifyCode = ref('');
const username = ref('');
const password = ref('');
const confirmPassword = ref('');
const router = useRouter();
const logo = ref(`${window.img}/other/logo.png`);

const sendCode = async () => {
  if (!phone.value) {
    message.error('请输入手机号');
  } else if (!/^1[3-9]\d{9}$/.test(phone.value)) {
    message.error('请输入正确的手机号');
  } else {
    try {
      const response = await axios.get(
          `http://127.0.0.1:8080/login/getCode?phone=${phone.value}`
      );
      if (response.data.code === 200) {
        message.success("验证码已发送")
      }else{
        message.error(response.data.message)
      }
    } catch (error) {
      console.error("发送手机号，获取验证失败", error);
    }
  }
};

// 添加密码验证函数
const validatePassword = (password) => {
  // 检查长度是否在8-16之间
  if (password.length < 8 || password.length > 16) {
    return false;
  }

  // 检查是否包含连续字符
  for (let i = 0; i < password.length - 2; i++) {
    const current = password.charCodeAt(i);
    const next = password.charCodeAt(i + 1);
    const nextNext = password.charCodeAt(i + 2);
    if (next - current === 1 && nextNext - next === 1) {
      return false;
    }
  }

  // 检查重复字符
  for (let i = 0; i < password.length - 2; i++) {
    if (password[i] === password[i + 1] && password[i] === password[i + 2]) {
      return false;
    }
  }

  return true;
};

const handleSubmit = async () => {
  if (!phone.value || !verifyCode.value || !username.value || !password.value || !confirmPassword.value) {
    message.error('请填写完整信息');
  } else if (!validatePassword(password.value)) {
    message.error('密码必须是8-16个非连续或重复的字符');
  } else if (password.value !== confirmPassword.value) {
    message.error('两次输入的密码不一致');
  } else {
    try {
      const data = {
        phone:phone.value,
        code:verifyCode.value,
        username:username.value,
        password:password.value,
      }
      console.log(data)
      const response = await axios.post(`http://127.0.0.1:8080/register`,data);
      if (response.data.code === 200) {
        message.success(response.data.message)
        setTimeout(()=>{
          router.push("/login/loginByAccount")
        },500);
      }else{
        message.error(response.data.message);
      }
    } catch (error) {
      message.error("系统错误")
      console.error("登录信息错误", error);
    }
  }
};

</script>

<template>
  <div class="bg-gray-100" id="backgroundImg">
    <div class="container">
      <div class="form-box">
        <div class="logo-container">
          <img src="http://192.168.137.100:9000/other/logo.png" class="logo"/>
        </div>

        <form @submit.prevent="handleSubmit" class="form-container">
          <div class="form-item">
            <a-input
                v-model:value="phone"
                placeholder="手机号"
                class="input-box"
                :maxLength="11"
            >
              <template #prefix>
                <mobile-outlined/>
              </template>
            </a-input>
          </div>

          <div class="form-item">
            <a-input
                v-model:value="verifyCode"
                placeholder="动态码"
                class="input-box"
            >
              <template #prefix>
                <safety-outlined/>
              </template>
              <template #suffix>
                <a-button
                    type="link"
                    @click="sendCode"
                    class="btn-link"
                >
                  {{ '获取动态码' }}
                </a-button>
              </template>
            </a-input>
          </div>

          <div class="form-item">
            <a-input
                v-model:value="username"
                placeholder="用户名：4-20个字符，支持汉字、字母、数字2种以上组合"
                class="input-box"
            >
              <template #prefix>
                <user-outlined/>
              </template>
            </a-input>
          </div>

          <div class="form-item">
            <a-input-password
                v-model:value="password"
                placeholder="设置密码"
                class="input-box"
            >
              <template #prefix>
                <lock-outlined/>
              </template>
            </a-input-password>
            <div class="hint">密码：8-16个非连续或重复的字符</div>
          </div>

          <div class="form-item">
            <a-input-password
                v-model:value="confirmPassword"
                placeholder="确认密码"
                class="input-box"
            >
              <template #prefix>
                <lock-outlined/>
              </template>
            </a-input-password>
          </div>

          <a-button
              type="primary"
              block
              @click="handleSubmit"
              class="submit-btn"
          >
            确定
          </a-button>
        </form>

        <div class="footer-links">
          <a href="#" class="footer-link">返回首页</a>
          <div>
            已有账号？
            <a href="#/user/login/loginByPhone" class="text-link">去登录</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<style scoped>
.container {
  display: flex;
  height: 100vh;
  width: 100vw; /* 修改为100vw确保占满整个视口宽度 */
  align-items: center;
  justify-content: center;

  overflow: hidden;
  margin: 0;
  padding: 0;
}

#backgroundImg{
  background: url('https://ai-public.mastergo.com/ai/img_res/a80c87a114e8edba452cbe702a3f4734.jpg') center/cover no-repeat fixed;
}

.form-box {
  width: 480px;
  padding: 32px;
  background: white;
  border-radius: 8px;
  box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.1);
  margin-left: 150px; /* 向右移动20px */
}

.logo-container {
  text-align: center;
  margin-bottom: 32px;
}

.logo {
  height: 48px;
}

.form-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-item {
  margin-bottom: 16px;
}

.input-box {
  height: 48px;
  font-size: 14px;
}

.hint {
  margin-top: 4px;
  font-size: 12px;
  color: #888;
}

.agreement {
  display: flex;
  align-items: center;
}

.text-link {
  color: #ff552e;
  text-decoration: none;
}

.text-link:hover {
  color: #ff6b48;
}

.submit-btn {
  height: 48px;
  background-color: #ff552e;
  color: white;
  border: none;
  font-size: 16px;
  cursor: pointer;
}

.submit-btn:hover {
  background-color: #ff6b48;
}

.footer-links {
  margin-top: 24px;
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #888;
}

.footer-link {
  text-decoration: none;
  color: #888;
}

.footer-link:hover {
  color: #555;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
  padding: 16px 0;
  background: transparent;
  font-size: 14px;
  color: white;
}
</style>